<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>图灵聊天</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				font-size: 14px;
			}
			
			#main {
				border: 1px #DBDADA solid;
				width: 560px;
				height: 400px;
				overflow: auto;
			}
			
			.r_face {
				width: 40px;
				height: 40px;
				background-image: url(img/experience.png);
				background-position: 0px -626px;
				float: right;
			}
			
			.l_face {
				width: 43px;
				height: 43px;
				background-image: url(img/experience.png);
				background-position: 0px -666px;
				float: left;
			}
			
			.l_jt {
				width: 0px;
				height: 0px;
				border-top: 6px transparent solid;
				border-bottom: 6px transparent solid;
				border-left: 6px transparent solid;
				border-right: 6px #f1f1f1 solid;
				display: block;
				position: absolute;
				top: 12px;
				left: -12px;
			}
			
			.l_nr {
				float: left;
				max-width: 320px;
				background-color: #f1f1f1;
				padding: 6px 18px;
				border-radius: 6px;
				position: relative;
				left: 14px;
			}
			
			.clear {
				clear: both;
			}
			
			.r_jt {
				width: 0px;
				height: 0px;
				border-top: 6px transparent solid;
				border-bottom: 6px transparent solid;
				border-right: 6px transparent solid;
				border-left: 6px #19B955 solid;
				display: block;
				position: absolute;
				top: 12px;
				right: -12px;
			}
			
			.r_nr {
				float: right;
				max-width: 220px;
				background-color: #19B955;
				padding: 6px 18px;
				border-radius: 6px;
				position: relative;
				right: 14px;
			}
			
			.l_main,
			.r_main {
				margin: 10px 0px;
			}
			
			#btn_fs {
				height: 40px;
				background-color: #00A3F0;
				width: 90px;
				border: 0px;
			}
			
			#txt {
				margin-left: 15px;
				height: 38px;
				width: 430px;
			}
			.xw_main{
				width: 190px;
			}
			.pic{
				width: 100%;
				height: 75px;
				position: relative;
			}
			.pic img{
				width: 100%;
				height: 100%;
			}
			.pic p{
				text-indent: 2px;
				background-color: #000000;
				/*opacity: 0.5;*/
				line-height: 15px;
				font-size: 12px;
				color: #ffffff;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 100%;
				position: absolute;
				bottom: 0px;
				
			}
			.info{
				padding: 5px 3px;
				height: 30px;
				width: 182px;
				border: 1px #DCDCDC solid;
				border-top: 0px solid;

			}
			.info img{
				width: 30px;
				height: 30px;
			}
			.info .make{
				line-height: 30px;
				color: #8E8C8C;
				font-size: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 140px;
				display: inline-block;
			}
			.tqdiv{
				border: 2px #00A3F0 solid;
				border-radius: 20px;
				width: 300px;
				overflow: hidden;
			}
			.tqdiv div{
				/*width: 30px;*/
				margin: 0px 3px;
				float: left;
			}
		</style>
		<script src="js/jquery-1.11.0.js"></script>
	</head>

	<body>
		<div id="connect">
			<div id="main">
				

			</div>
			<input type="text" id="txt" />
			<input type="button" id="btn_fs" value="发送" onclick="fs();" />
		</div>
		<script type="text/javascript">
			var tq=false;
			$('#txt').keyup(function(event){
				if(event.keyCode==13){
					fs();
				}
			});
		
			function fs() {
				var str = $('#txt').val().trim();
				var dx = '<div class="r_main"><div class="r_face"></div><div class="r_nr">' + str + '<span class="r_jt"></span></div></div><div class="clear"></div>'
				$(dx).appendTo('#main');
				if(str=='天气'){
					tq=true;
					
					var hfs = '<div class="l_main"><div class="l_face"></div><div class="l_nr">请输入城市';
					hfs += '<span class="l_jt"></span></div></div><div class="clear"></div>';

					$(hfs).appendTo('#main');
					
					$('#txt').val('');
					$('#main')[0].scrollTop = $('#main')[0].scrollHeight;
					
					return;
				}
				if(tq){
					tq=false;
					$.ajax({
						dataType: "JSONP",
						jsonp:"callback",
						type: "get",
						url: "http://v.juhe.cn/weather/index?cityname=" + str + "&dtype=&format=&key=921b422115ab8b328db727721bd782fe", //接口服务器地址  
						success: function(response) {
							//成功执行  
							var shuju= response.result.future;
							console.log(shuju);
							var strs='<div class="tqdiv">';
							for(var a in shuju){
//								shuju.a.date;//日期
//								shuju.a.temperature;//温度
//								shuju.a.weather;//天气
//								shuju.a.week;//星期
//								shuju.a.wind;//风速
							
								strs+='<div>'+shuju[a].date.substring(4,6)+'月'+shuju[a].date.substring(6)+'号</div><div>天气：'+shuju[a].weather+'</div><div class="clear"></div><div>温度：'+shuju[a].temperature+'</div><div>风速：'+shuju[a].wind+'</div><div class="clear"></div>';
							
							}
							strs+='</div>';
//							var strs = str + '在' + response.result.today.date_y + response.result.today.dressing_advice + '<br>天气' + response.result.today.weather;
							var hf = '<div class="l_main"><div class="l_face"></div><div class="l_nr">'+strs;
							hf += '<span class="l_jt"></span></div></div><div class="clear"></div>';
							$(hf).appendTo('#main');
							$('#main')[0].scrollTop = $('#main')[0].scrollHeight;
							
						},
						error: function(e) {
							//失败执行  
							alert(e.status + ',' + e.statusText);
						}
					});
					
					$('#txt').val('');
					$('#main')[0].scrollTop = $('#main')[0].scrollHeight;
					
					return;
				}
				
				
				
				
				

				$.post('http://www.tuling123.com/openapi/api', {
					"key": "3c23287d10b140f7b8ab639ccfbce960",
					"info": str,
					"userid": "12345678"
				}, function(data) {
					var _list = '1';
					var _url = '2';
					var hf = '<div class="l_main"><div class="l_face"></div><div class="l_nr">' + data.text;
					if(data.list) {
						hf+='<div class="xw_main"><div class="pic"><p>'+data.list[0].article+'</p><a href="'+data.list[0].detailurl+'" target="_blank"><img src="'+data.list[0].icon+'" alt=""></a></div>';
						for(var xw = 1; xw < 4; xw++) {
							hf +='<div class="info"><a href="'+data.list[xw].detailurl+'" target="_blank"><div class="make">'+data.list[xw].article+'</div></a><a href="'+data.list[xw].detailurl+'" target="_blank"><img src="'+data.list[xw].icon+'" alt=""></a></div>';
						}
						hf+='</div>';
					}
					if(data.url) {
						hf += '<a target="_blank" href="' + data.url + '">打开访问</a>';
					}
					hf += '<span class="l_jt"></span></div></div><div class="clear"></div>';

					$(hf).appendTo('#main');
					$('#main')[0].scrollTop = $('#main')[0].scrollHeight;
				});

				$('#main')[0].scrollTop = $('#main')[0].scrollHeight;
				$('#txt').val('');
			}
		</script>
	</body>

</html>